<template>
  <a-modal
    destroyOnClose
    :title="title"
    :width="1400"
    :visible="visible"
    @cancel="handleCancel"
    :footer="null"
    cancelText="关闭"
  >
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-collapse v-model="activeKey">
        <!-- 基本信息 -->
        <a-collapse-panel key="1" header="基本信息">
          <a-row :gutter="48">
            <a-col :span="8" :hidden="true">
              <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bpmBizTitle">
                <a-input disabled v-model="model.bpmBizTitle" placeholder="请输入标题" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purchaseBill">
                <a-input v-model="model.purchaseBill" placeholder="请输入单据编号" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposer">
                <select-user-by-dep
                  placeholder="请选择申请人"
                  v-model="model.proposer" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
                <j-select-depart placeholder="请选择申请部门" v-model="model.departId" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                <j-date
                  placeholder="请选择申请时间"
                  v-model="model.createTime"
                  :show-time="true"
                  date-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="关联项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
                <a-input :readOnly="true" v-model="model.projectId_dictText" style="color: #1890FF;" placeholder="请选择关联项目" @click.prevent="projectClick(model.projectId)"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="采购总预算（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectBudget">
                <a-input-number :max="99999999" :min="0" :precision="2" v-model="model.projectBudget" placeholder="请输入采购总预算" style="width: 100%" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="费用所属团队" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teamId">
                <select-team-input placeholder="请选择团队" disabled v-model="model.teamId" :tdlx="3" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="付款方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payManner">
                <a-input disabled :max-length="100" v-model="model.payManner" placeholder="请输入付款方式" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="采购大类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="provisionBroad">
                <a-input disabled v-model="model.provisionBroad_dictText" placeholder="请选择采购大类" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="采购方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invitationManner">
                <j-dict-select-tag disabled type="list" v-model="model.invitationManner" dictCode="bidding_type" placeholder="请选择货到付款" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8" v-if="showBusinessSegment">
              <a-form-model-item label="所属业务板块" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="businessSegment">
                <j-dict-select-tag disabled type="list" v-model="model.businessSegment" dictCode="business_segment" placeholder="请选择所属业务板块" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="期望到货时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expectUseTime">
                <j-date
                  disabled
                  placeholder="请选择到货时间"
                  v-model="model.expectUseTime"
                  :show-time="true"
                  date-format="YYYY-MM-DD HH:mm"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="采购需求及项目描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="description">
                <a-input disabled :max-length="30" v-model="model.description" placeholder="请输入采购需求及项目描述" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                <a-textarea disabled :max-length="500" v-model="model.remark" rows="4" placeholder="请输入备注"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-collapse-panel>
        <!-- 物料明细 -->
        <a-collapse-panel key="2" header="物料明细">
          <a-col :span="24">
            <a-table
              ref="table"
              size="middle"
              :scroll="{x:true}"
              bordered
              rowKey="key"
              :columns="defColumns"
              :dataSource="dataSource"
              :pagination="false"
              class="j-table-force-nowrap"
            >
              <span slot="amountTitle"><span style="color: red; text-align: center;">*</span> 数量</span>
              <span slot="budgetAmountTitle"><span style="color: red; text-align: center;">*</span> 预算价格（元）</span>
            </a-table>
          </a-col>
        </a-collapse-panel>
        <!-- 附件信息 -->
        <a-collapse-panel key="3" header="附件信息（附件要求：1、业主盖章版合同；2、工程量清单；3、技术要求等）">
          <a-row :gutter="48">
            <a-col :span="24">
              <a-form-model-item prop="purchaseFile">
                <a-button icon="download" @click="viewFile(model.purchaseFile)">文件列表</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-collapse-panel>
      </a-collapse>
    </a-form-model>
    <erp-project-report-modal  ref="projectForm"></erp-project-report-modal>
    <view-file-modal ref="viewFileModal"></view-file-modal>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import { viewFile } from '@/utils/util'
import ViewFileModal from '@/views/scy/components/ViewFileModal'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
import SelectProjectInput from '@/views/scy/components/SelectProjectInput'
import ErpProjectReportModal from '@/views/erp/report/project/modules/ErpProjectReportModal'
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
export default {
  components: {
    SelectUserByDep,
    ViewFileModal,
    SelectTeamInput,
    SelectProjectInput,
    ErpProjectReportModal
  },
  name: 'ErpRevokedDocFormApplyDetail',
  mixins: [viewFile],
  data() {
    return {
      title:"招标采购单据详情",
      visible:false,
      activeKey: ['1', '2', '3'],
      model: {},
      labelCol: {
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      validatorRules: {
        teamId: [
          { required: true, message: '请选择团队!', trigger: 'change' }
        ],
        projectBudget: [
          { required: true, message: '请输入项目预算!', trigger: 'blur' },
        ],
        payManner: [
          { required: true, message: '请选择付款方式!', trigger: 'blur' }
        ],
        invitationManner: [
          { required: true, message: '请选择采购方式!', trigger: 'blur' }
        ],
        expectUseTime: [
          { required: true, message: '请选择期望到货时间!', trigger: 'change' }
        ],
        provisionBroad: [
          { required: true, message: '请选择采购大类!', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入采购需求及项目描述!', trigger: 'blur' }
        ],
        businessSegment: [
          { required: true, message: '请选择所属业务板块!', trigger: 'blur' }
        ],
      },
      defColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '采购小类',
          align: 'center',
          dataIndex: 'provisionSmall',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['provisionSmall'], text + '')
            }
          }
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materialName',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['materialName'], text + '')
            }
          }
        },
        {
          title: '物料编号',
          align: 'center',
          dataIndex: 'materialBillId'
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'brand'
        },
        {
          title: '规格型号',
          align: 'center',
          dataIndex: 'specification'
        },
        {
          slots: { title: 'amountTitle' },
          align: 'center',
          dataIndex: 'amount',
          scopedSlots: { customRender: 'amount' }
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'unit',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['unit'], text + '')
            }
          }
        },
        {
          title: '参考价格（元）',
          align: 'center',
          dataIndex: 'referencePrice'
        },
        {
          slots: { title: 'budgetAmountTitle' },
          align: 'center',
          dataIndex: 'budgetAmount',
          scopedSlots: { customRender: 'budgetAmount' }
        }
      ],
      dataSource: [],
      showBusinessSegment: false,
      dictOptions: {},
    }
  },
  methods: {
    handleCancel() {
      this.visible = false;
    },
    initDictConfig() {
      // 采购小类
      initDictOptions('erp_material_category,category_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'provisionSmall', res.result)
        }
      })
      // 物料名称
      initDictOptions('erp_material,material_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'materialName', res.result)
        }
      })
      // 单位
      initDictOptions('unit_type').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'unit', res.result)
        }
      })
    },
    edit (record) {
      this.visible = true
      this.initDictConfig()
      this.model = Object.assign({},record)
      if(!!this.model.provisionBroad&&this.model.provisionBroad=='1535176942946377729'){
        // 选择的是行政类
        this.showBusinessSegment = false;
      }else{
        // 选择的不是行政类
        this.showBusinessSegment = true;
      }
      this.childLoadData(this.model.id)
    },
    projectClick(id) {
      const that = this
      this.$nextTick(() => {
        getAction('/api/erp/project/report/erpProjectReport/queryById', { id: id }).then((res) => {
          if (res.success) {
            const model = res.result
            that.$refs.projectForm.getDetail(model);
            that.$refs.projectForm.title = '项目一览表';
          }
        })
      })
    },
    childLoadData(id) {
      const params = {
        billId: id,
        column: 'createTime',
        order: 'desc',
        pageNo: 1,
        pageSize: 10
      }
      getAction('/api/erp/purchase/procurement/erpPurchaseApplyInvitationDetail/allList', params).then(res => {
        if (res.success) {
          this.dataSource = res.result.records || res.result
          this.dataSource.forEach((item, index) => {
            item.key = index
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
  }
}
</script>
<style scoped>

</style>